<template>
  <div class="container">
    <div class="row mt-2 mr-1">
      <el-card class="col ml-1 mr-1 pl-1 pr-1">
        <div slot="header">
          <span> {{ $language.local("Recharge Calculation") }}</span>
        </div>
        <amount-calc></amount-calc>
      </el-card>

      <el-card class="invoice-instructions col">
        <div class="title">
          <h3><i class="el-icon-info"></i> 充值指引:</h3>
        </div>

        <p class="text item">
          1. 企业使用已添加至平台的企业银行账户汇款至指定的服务商账户。
        </p>
        <p class="text item">
          2. 服务商账户收到汇款后系统会自动计算入账金额并计入企业账户。
        </p>
        <p class="text item">
          3.
          由于对公账户到账情况不定，请在法定工作日工作期间进行充值，以免充值入账延后影响企业代发出款。
        </p>
        <p class="text item">
          4. 可以使用左图
          <b>充值计算器</b> 功能计算应充值金额。
        </p>
        <p class="text item red">
          注：请使用已添加至平台的企业银行账户进行汇款，否则平台无法自动同步资金信息至企业账户。
        </p>
        <p class="text item red">如有疑问请联系平台客服人员。</p>
      </el-card>
    </div>
  </div>
</template>

<script>
import AmountCalc from "./AmountCalc.vue";
export default {
  components: {
    "amount-calc": AmountCalc,
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
// .el-step__title.is-finish {
//   color: #22819d;
// }
.invoice-instructions {
  width: 100%;
  color: #22819d;
  background-color: #f2fcff;
  border: none;
  padding-left: 2rem;
  .title {
    font-size: 1rem;
  }
}
</style>
